<template>
    <div class="app-container">

        <el-form ref="form" :rules="rules" class="thin-form" :model="form" label-width="120px">

            <el-form-item label="标题"
                          prop="title"
                          required>
                <el-input v-model="form.title"></el-input>
            </el-form-item>

            <el-form-item label="名称"
                          prop="name"
                          required>
                <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="二级域名"
                          prop="subDomain"
                          required>
                <el-input v-model="form.subDomain"></el-input>
            </el-form-item>
            <el-form-item label="城市"
                          prop="city"
                          required>
                <el-select v-model="form.city" :disabled="!isNew" placeholder="选择城市">
                    <el-option
                            v-for="item in cities"
                            :key="item._id"
                            :label="item.name"
                            :value="item._id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="电话"
                          prop="phone"
                          required
                          >
                <el-input v-model="form.phone"></el-input>
            </el-form-item>

            <el-form-item label="email"
                          prop="email"
                          >
                <el-input v-model="form.email"></el-input>
            </el-form-item>

            <el-form-item label="简介"
                          prop="intro"
                          required>
                <el-input v-model="form.intro" type="textarea"></el-input>
            </el-form-item>

            <el-form-item label="关键字"
                          prop="keywords"
                          required>
                <el-input v-model="form.keywords" type="textarea"></el-input>
            </el-form-item>

            <el-form-item label="管理员账号"
                          prop="admin.username"
                          required>
                <el-input v-model="form.admin.username"></el-input>
            </el-form-item>

            <el-form-item label="管理员密码"
                          prop="admin.username"
                          required>
                <el-input v-model="form.admin.password"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="onReset">重置</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
  import fetch from '@/utils/fetch';
  import {parseTime} from '@/utils';
  import industries from '@/data/industries.json';
  import ElButton from "../../../../node_modules/element-ui/packages/button/src/button";


  export default {
    components: { ElButton },
    data() {
      return {
        form: {
          title: '',
          city: '',
          name: '',
          subDomain: '',
          phone: '',
          email: '',
          intro: '腾铺网，南京腾铺网，南京商铺网，南京店铺转让网，南京最专业的店铺转让网站，快速转店，免费找店。为你提供店铺生意转让、找店、商铺出租、出售、招租、求租等海量店铺物业信息，充分满足您免费店铺信息发布/求租店铺需求。',
          keywords: '腾铺网,店铺网,南京腾铺网,南京店铺网,南京找店铺,南京找商铺,南京店铺经营,南京商铺经营,南京店铺转让,南京商铺转让,南京店铺出租,南京商铺出租,南京店铺出售,南京商铺出售,南京店铺招租,南京商铺招租,南京店铺求租,南京商铺求租,南京店铺招商,南京商铺招租,南京店铺信息发布网,南京商铺信息发布网',
          admin: {
            username: '',
            password: ''
          }
        },
        cities: {},
        rules: {
          title: { required: true, message: '请输入标题', trigger: 'blur' },
          name: { required: true, message: '请输入名称', trigger: 'blur' },
          phone: { required: true, message: '请输入联系电话', trigger: 'blur' },
          city: { required: true, message: '请选择城市', trigger: 'change' },
          subDomain: { required: true, message: '请输入二级域名', trigger: 'blur' },
          intro: { required: true, message: '请输入简介', trigger: 'blur' },
          keywords: { required: true, message: '请输入关键字', trigger: 'blur' },
          username: { required: true, message: '请输入管理员账号', trigger: 'blur' },
          password: { required: true, message: '请输入管理员密码', trigger: 'blur' },
        },
        isNew: true
      }
    },
    watch: {

    },
    created() {
      if (this.$route.params.id) {
        this.isNew = false;
        this.fetchData();
      }
      this.fetchCityData();
    },
    computed: {

    },
    methods: {
      fetchData() {
        fetch({
          url: '/site/'+this.$route.params.id,
          method: 'get'
        }).then(res => {
          res.data.city && (res.data.city = res.data.city.$id);
          Object.assign(this.form,res.data);
        })

      },
      fetchCityData() {
        fetch({
          url: '/cities',
          method: 'get'
        }).then(res => {
          this.cities = res.data;
        })
      },
      onReset() {
        this.$refs.form.resetFields();
      },
      onSubmit() {

        this.$refs.form.validate((valid) => {
          if (valid) {
            fetch({
              url: '/site' + (this.isNew ? '' : '/' + this.$route.params.id),
              method: this.isNew ? 'post' : 'put',
              data: JSON.parse(JSON.stringify(this.form))
            }).then(res => {
              if (res.data.result.ok === 1) {
                this.$message('保存成功');
                this.$router.push('/setting/site');
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },


    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .checkbox-item{
        display: block;
        margin: 6px 20px 6px 10px;
    }
    .img{
        margin: 8px 0;
        width: 80px;
        height: 60px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        &[lazy=error],&[lazy=loading]{
            background-size: 50%;
        }
    }
    .time{
        word-break:break-all ;
    }
    .search-input{
        width: 300px;
    }
    .el-select {
        width: 100%;
    }
</style>
